//发送ajax，从数据库拿商品数据
//传参：floor
//当floor等于1时
$.get('./php/goods.php', {'floor':1}, res => {
    console.log(res);
    var {meta: {status,msg}, data} = res;
    if(status === 1){
        var str = '';
        data.forEach(item => {
            //放大镜小图，imgpath那里分割一下，实际数据库里有几张图放几个链接
            str += `
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="${item.imgpath.split('=====')[0]}" alt="...">
                    <div class="caption">
                        <h3 class="goodsname">${item.name}</h3>
                        <p class="introduce">${item.introduce}</p>
                        <p><a href="detail.html?id=${item.id}" class="btn btn-primary" role="button">查看详情</a> </p>
                    </div>
                </div>
            </div>
            `;
        })
        $('.floor1 .row').html(str);
    }
}, 'json')

//当floor等于2时
$.get('./php/goods.php', {'floor':2}, res => {
    console.log(res);
    var {meta: {status,msg}, data} = res;
    if(status === 1){
        var str = '';
        data.forEach(item => {
            str += `
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="${item.imgpath}" alt="...">
                    <div class="caption">
                        <h3 class="goodsname">${item.name}</h3>
                        <p class="introduce">${item.introduce}</p>
                        <p><a href="detail.html?id=${item.id}" class="btn btn-primary" role="button">查看详情</a> </p>
                    </div>
                </div>
            </div>
            `;
        })
        $('.floor2 .row').html(str);
    }
}, 'json')

//当floor等于3时
$.get('./php/goods.php', {'floor':3}, res => {
    console.log(res);
    var {meta: {status,msg}, data} = res;
    if(status === 1){
        var str = '';
        data.forEach(item => {
            str += `
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="${item.imgpath}" alt="...">
                    <div class="caption">
                        <h3 class="goodsname">${item.name}</h3>
                        <p class="introduce">${item.introduce}</p>
                        <p><a href="detail.html?id=${item.id}" class="btn btn-primary" role="button">查看详情</a> </p>
                    </div>
                </div>
            </div>
            `;
        })
        $('.floor3 .row').html(str);
    }
}, 'json')



// 楼层跳转
$('.back ul li:lt(3)').click(function(){
    //获取li的data-class属性的类名赋值给classname变量
    var classname = $(this).attr('data-class');
    //$('.' + classname)为对应的一楼二楼的类名
    //把对应标签在整个页面中的高度赋值给t
    var t = $('.' + classname).offset().top;
    console.log(t);
    //页面高度跳转
    $('html,body').animate({
        scrollTop:t
    },500);
    return false;
})


$('.back ul li:last').click(function(){
    $('html,body').animate({
        scrollTop:0
    },500);
    return false;
})